<template>
  <div class="overLoadCont">
    <h6 class="title">今日车型超载统计</h6>
    <div class="southnToNorth">
      <div class="loading " v-show="loadingFlag">
        <van-loading class="wap" type="spinner" vertical>数据加载中...</van-loading>
      </div>
      <!-- <p class="noneData" v-show="noneDataFlag">暂无数据</p> -->
      <div id="myChart" style="width: 100%;height:100%;"></div>
    </div>
  </div>
</template>
<script>
import requistApi from '@/api'
import commonFn from '@/utils/commonFn'
import load from '../../api/load'
export default {
  components: {},

  data() {
    return {
      loadingFlag: true,
      noneDataFlag: false,
      OverLoadList: [],
      OverLoadModle: [],
      arr: [],
      historyTitle: '暂无数据',
    }
  },
  created() {
    this.bridgeId = commonFn.getQueryVariable('bridgeId') || '758323582542544896'
    this.timer()
    this.getOverLoadDataList() // 获取今日车流量对比数据列表数据
  },
  mounted() {
    this.drawLine()
    //echarts实现自适应部分
    this.resizefun = () => {
      this.$echarts.init(document.getElementById('myChart')).resize()
    }
    window.addEventListener('resize', this.resizefun)
  },
  //移除事件监听，避免内存泄漏
  beforeDestroy() {
    window.removeEventListener('resize', this.resizefun)
    this.resizefun = null
  },
  methods: {
    // 获取今日超载数据
    getOverLoadDataList(id = this.bridgeId) {
      const modelsArr = [] //超载车型
      requistApi.load.getOverLoadData(id, this.getParams()).then((res) => {
        if (res.data.data !== undefined && JSON.stringify(res.data.data) !== '{}') {
          this.OverLoadList = res.data.data
          // console.log(this.OverLoadList)
          this.OverLoadList.map((item) => {
            modelsArr.push(item.auto_type_name)
          })
          this.OverLoadModle = modelsArr
          this.getCarModle()
          this.drawLine() //请求完数据 重新加载图表
          this.loadingFlag = false
          if (this.OverLoadModle.length == 0 && this.arr == 0) {
            this.noneDataFlag = true
          }
        }
      })
    },
    getCarModle() {
      const countCarNum = [] //超载车型总数
      this.OverLoadList.map((item) => {
        countCarNum.push(item.countCarPassNum)
      })
      this.arr = countCarNum
    },
    //
    getParams() {
      let token = commonFn.getQueryVariable('token') || ''
      let appkey = commonFn.getQueryVariable('app-key') || ''
      return { token, appkey }
    },

    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: {
          show: this.noneDataFlag, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
          text: this.historyTitle, //主标题文本，'\n'指定换行
          x: 'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
          y: '10%',

          textStyle: {
            fontSize: 12,
            color: '#327bdc',
          },
        },

        color: ['#79c6f0'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: '3%',
          top: '12%',
          right: '3%',
          bottom: '5%',
          containLabel: true,
        },

        xAxis: [
          {
            type: 'category',
            data: this.OverLoadModle,
            // data: ['拖拉机', '链式或拖拉机', '中小客车', '小型货车', '大客车', '中型货车', '大型货车', '特大型货车'],
            axisTick: {
              alignWithLabel: true,
            },

            axisLabel: {
              show: true,
              interval: 1,
              textStyle: {
                fontSize: '9.5', //字体大小
                color: '#333333',
              },
              // formatter: function(value) {
              //   //关键代码
              //   var res = value
              //   if (res.length > 7) {
              //     res = res.substring(0, 6) + '..'
              //   }
              //   return res
              // },
            },
            // offset: 10,
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: '#ccc',
              }, // x轴坐标轴颜色
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: '#ccc',
              }, // x轴坐标轴颜色
            },
            axisLabel: {
              interval: 0,
              formatter: '{value}',
              textStyle: {
                fontSize: '9.5',
                color: '#333333',
              },
            },
          },
        ],
        series: [
          {
            // name: '直接访问',
            type: 'bar',
            barWidth: '25%',
            // data: [1, 627, 2850, 422, 558, 434, 1176, 110],
            data: this.arr,

            itemStyle: {
              normal: {
                //颜色渐变
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#84CAF0',
                  },
                  {
                    offset: 1,
                    color: '#A7DCF7',
                  },
                ]),
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: {
                    //数值样式
                    color: '#979797',
                    fontSize: '9.5',
                  },
                },
              },
            },
          },
        ],
      })
    },
    timer() {
      return setInterval(() => {
        this.getOverLoadDataList()
      }, 20000)
    },
  },
  destroyed() {
    clearInterval(this.timer) //清除定时器
  },
}
</script>
<style lang="less" scoped>
.overLoadCont {
  margin-top: 10px;
  .title {
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-bottom: 10px;
  }
  .southnToNorth {
    position: relative;
    .noneData {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 13px;
      font-weight: 600;
      color: #327bdc;
    }
    height: 187px;
    width: 100%;
    margin: 0 auto;
    box-shadow: 0px 2px 8px 0px rgba(173, 173, 173, 0.5);
    border-radius: 8px;
    background: #fff;
    .loading {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
